<template>
  <div class="empty-state">
    <i :class="icon"></i>
    <h3 v-if="title">{{ title }}</h3>
    <p>{{ message }}</p>
    <button 
      v-if="actionText" 
      class="action-btn"
      @click="$emit('action')"
    >
      {{ actionText }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    icon: {
      type: String,
      default: 'fas fa-inbox'
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: '暂无数据'
    },
    actionText: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  text-align: center;
  padding: $spacing-xl * 2;
  color: var(--text-secondary);

  i {
    font-size: 3em;
    margin-bottom: $spacing-md;
    color: $primary;
    opacity: 0.8;
  }

  h3 {
    color: var(--text-primary);
    font-size: 1.2em;
    margin-bottom: $spacing-sm;
  }

  p {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: $spacing-lg;
  }

  .action-btn {
    padding: $spacing-sm $spacing-xl;
    background: $primary;
    color: white;
    border: none;
    border-radius: $border-radius-lg;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95em;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba($primary, 0.2);
    }
  }
}

@include responsive(sm) {
  .empty-state {
    padding: $spacing-xl;

    i {
      font-size: 2.5em;
    }
  }
}
</style> 